<template>
    <div>
        <p>我是父组件</p>
        <Son ref="son1"></Son>
        <p ref="p1">我是p元素</p>
    </div>
</template>

<script>
import Son from './Son.vue'
// ref 的使用
// 01: ref该属性绑定在组件上, 则通过this.$refs.属性名 获取的值为子组件实例
// 02: ref该属性绑定在普通元素上, 则通过this.$refs.属性名 获取的值为当前元素

// 问题? 请问在vue中有哪些方式可以获取到原生dom
// 01: document.querySelector()
// 02: ref
// 03: 自定义指令 el

export default {
    data() {
        return {
        }
    },
    components: {
        Son
    },
    mounted() {
        console.log(this.$refs.son1);
        console.log(this.$refs.p1.innerHTML);
        this.$refs.p1.style.color = 'red'
    }
}
</script>
<style scoped></style>